<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <meta name="apple-touch-fullscreen" content="yes">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />
<title>气泡提示Tips</title>
<script src="jquery-1.7.2.js"></script>
<script src="jquery.showTips.js"></script>
<style type="text/css">
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,input,select,button,textarea {margin: 0;padding: 0;}
body {	line-height: 1; }
.box{margin:30px auto 0 100px; font-size:14px; overflow:hidden;}
input,select,button,textarea{ font-family:Arial, Helvetica, sans-serif;text-decoration: none;outline:none;}
.tpinp{ width:250px; height:30px;line-height:30px; border:1px #CCCCCC solid;}

/* balloon tips  */
.trips{min-height:22px; line-height:22px; padding:6px;border-radius:4px;}
.trips .tripscon{font-size:12px;color:#000; float:left; overflow:hidden;}
.trips .tripsclose{width:12px;height:12px;line-height:12px; color:#cc0000;display:block;font-size:14px; text-align:center; position:absolute;top:4px;right:4px; cursor:pointer;}
/*
.trips-top-left i{border-top-color:#bbb;top:100%;left:5px;}
.trips-top-left em{border-top-color:#fff;top:100%;left:6px;}
.trips-top-center i{border-top-color:#bbb;top:100%;left:50%; margin-left:-8px;}
.trips-top-center em{border-top-color:#fff;top:100%;left:50%;margin-left:-7px;}
*/
</style>
<script type="text/javascript">

jQuery(function(){
    jQuery("#ddd").on("click",function(){alert(121545455)})
	jQuery(".t1").showTips({type:"html",alignTo:["top","left"],trigger:"click",width:160,isclose:true});
	jQuery(".t11").showTips({type:"html",alignTo:["top","center"],trigger:"click",width:240,isclose:true});
	jQuery(".t12").showTips({type:"html",alignTo:["top","right"],trigger:"click",width:160,isclose:true});
	
	jQuery(".b1").showTips({type:"html",alignTo:["bottom","left"],trigger:"click",width:160,isclose:true});
	jQuery(".b11").showTips({type:"html",alignTo:["bottom","center"],trigger:"click",width:240,isclose:true});
	jQuery(".b12").showTips({type:"html",alignTo:["bottom","right"],trigger:"click",width:160,isclose:true});
	
	jQuery(".l1").showTips({type:"html",alignTo:["left","top"],trigger:"click",width:160,isclose:true});
	jQuery(".l11").showTips({type:"html",alignTo:["left","center"],trigger:"click",width:160,isclose:true});
	
	jQuery(".r1").showTips({type:"html",alignTo:["right","top"],trigger:"click",width:160,isclose:true});
	jQuery(".r11").showTips({type:"html",alignTo:["right","center"],trigger:"click",width:160,isclose:true});
	
	jQuery(".htmid").showTips({type:"id",alignTo:["left","top"],trigger:"click",width:160,isclose:true,content:"#ces"});
	jQuery(".htmcon").showTips({type:"html",alignTo:["right","top"],trigger:"click",width:160,isclose:true,content:"<p>我是以直接HTML的方式出现的</p>",success:function(){alert("弹出来哦！")}});
	
	jQuery("#onmous").showTips({type:"html",alignTo:["follow"],trigger:"mouse",width:160});
    
	$("#is").on('focus blur input propertychange',function(e){
		if($(this).val()==""){$(this).showTips({customid:"is",trigger:"show",width:160,content:"请输入内容！"},"show");}
		if($(this).val()=="yes"){$(this).showTips({customid:"is",width:160},"hide");}
		if($(this).val()!=""&&$(this).val()!="yes"){
			$(this).showTips({customid:"is",trigger:"show",width:160,content:"输入不正确输入不正确输入不正确输入不正确输入不正确！"},"show");
		}
	});
})
</script>
</head>

<body>
<div class="box">
<p style="height:80px; line-height:80px; color:#aaa;font-size:18px; margin-bottom:5px;text-align:center;border:1px #0033FF solid;" id="onmous" tips="天王盖地虎，宝塔镇河妖！">把鼠标移动框里来</p>
<input type="text" class="t1 tpinp"  value="top left">
<input type="text" class="t11 tpinp" tips="天王盖地虎，宝塔镇河妖！" value="top center"> 
<input type="text" class="t12 tpinp" tips="天王盖地虎，宝塔镇河妖！" value="top right"><br/><br/><br/><br/>

<input type="text" class="b1 tpinp" tips="天王盖地虎，宝塔镇河妖！" value="bottom left">
<input type="text" class="b11 tpinp" tips="天王盖地虎，宝塔镇河妖！" value="bottom center"> 
<input type="text" class="b12 tpinp" tips="天王盖地虎，宝塔镇河妖！" value="bottom right"><br/><br/><br/><br/>

<input type="text" class="l1 tpinp" tips="天王盖地虎，宝塔镇河妖！" value="left top">
<input type="text" class="r1 tpinp" tips="天王盖地虎，宝塔镇河妖！" value="right top"><br/><br/><br/><br/>
<input type="text" class="l11 tpinp" tips="天王盖地虎，宝塔镇河妖！" value="left center">
<input type="text" class="r11 tpinp" tips="天王盖地虎，宝塔镇河妖！" value="right center"><br/><br/><br/><br/>

<input type="text" class="htmid tpinp" value="我是以ID类型HTML格式的方式出现的">
<input type="text" class="htmcon tpinp" value="我是以直接HTML的方式出现的"><br/><br/><br/><br/>
<input type="text" class="tpinp" >
<input type="text" class="tpinp" id="is" value=""> <br/><p>当输入yes的时候通过</p>

<br/><br/><br/><br/> 
</div>
<div id="ces" style="display:none;"><a href="javascript:;" id="ddd">我是以HTML格式的ID出现的！</a></div>   
</body>
</html>
